<template>
  <div class="productBox">
    <div class="topBox">
      <div class="leftBtn">
        <div class="topBtn firstTop">
          <!-- <el-button class="filing-button" type="primary" icon="el-icon-plus">添加妥了网自营店商品</el-button> -->
          <el-button
            class="filing-button"
            type="primary"
            icon="el-icon-plus"
            @click="addProduct"
          >添加商品</el-button>
        </div>
        <div class="topBtn">
          <el-button class="filing-button" type="primary" @click="downloadExcel">下载EXCEL模板</el-button>
          <el-upload
            class="upload-box"
            :action="uploadExcel.url"
            :name="uploadExcel.name"
            accept=".xls, .xlsx"
            :on-success="uploadSuccess"
            :show-file-list="false"
          >
            <el-button class="filing-button" type="primary" slot="trigger">EXCEL导入</el-button>
          </el-upload>
        </div>
      </div>
      <div class="topBtn clearTopBtn">
        <el-button class="filing-button" type="primary" @click="clearAll" plain>清空所有</el-button>
      </div>
    </div>
    <template v-if="tableDataObj.tableData&&tableDataObj.tableData.length>0">
      <table-list
        class="marTop"
        :tableObj="tableDataObj"
        :hasPagination="false"
        @showEditWindow="showEditWindow"
        @removeData="removeData"
      ></table-list>
    </template>
    <template v-else>
      <div class="empty">
        <div class="emptyIcon el-icon-document"></div>
        <div class="txt">暂无商品信息，请您在上方添加</div>
      </div>
    </template>

    <edit
      v-if="isShow"
      :isTitle="isTitle"
      :isEditWindow="isEditWindow"
      @closedWindow="closed"
      @editData="onEditData"
    ></edit>
  </div>
</template>

<script>
import { computed, getCurrentInstance } from '@vue/composition-api'
import TableList from '@/components/public/TableList.vue'
import { useReport } from '@/hooks/report'
import Edit from '@/components/public/Edit.vue'

export default {
  components: { TableList, Edit },
  setup () {
    const vm = getCurrentInstance()
    const validateForm = async () => {
      return new Promise(resolve => {
        if (!reportState.form.filingGoodsInfos || !reportState.form.filingGoodsInfos.length) {
          vm.$message.error('请添加商品信息')
        } else {
          resolve(true)
        }
      })
    }
    const { reportState } = useReport(validateForm)
    if (!reportState.form.filingGoodsInfos) {
      vm.$set(reportState.form, 'filingGoodsInfos', [])
    }

    const tableDataObj = computed(() => {
      return {
        tableData: reportState.form.filingGoodsInfos,
        isOperate: true, // 是否要操作按钮
        total: 0, // 总页数
        pageSize: 10, // 每页显示的条数
        pageNum: 1, // 默认第一页
        isShowPages: false, // 是否展示分页
      }
    })

    return {
      reportState,
      tableDataObj,
    }
  },
  data () {
    return {
      isShow: false, // 显示添加商品时窗口
      isTitle: false, // 展示是 添加商品 还时编辑商品的标题
      isEditWindow: {
        isEditNum: 0, // 要编辑的商品序号
        isEditId: 0, // 要编辑的商品id
        data: null,
      },
      uploadExcel: {
        url: '/api/utils/formatExcelToGoodInfo',
        name: 'excel',
      },
    }
  },

  methods: {
    onEditData (data) {
      if (this.isEditWindow.isEditNum > 0) {
        this.reportState.form.filingGoodsInfos.splice(this.isEditWindow.isEditNum - 1, 1, data)
      } else {
        this.reportState.form.filingGoodsInfos.push(data)
      }
    },
    // 添加商品
    addProduct () {
      this.isEditWindow.isEditNum = 0
      this.isShow = true
      this.isTitle = false
    },
    // 关闭弹窗
    closed (bl) {
      this.isShow = bl
      this.isEditWindow.isEditNum = 0
      this.isEditWindow.isEditId = 0
    },
    clearAll () {
      this.$confirm('确定清空所有信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.reportState.form.filingGoodsInfos = []
      })
    },
    // 点击编辑 打开弹窗
    showEditWindow (obj) {
      this.isShow = true
      this.isTitle = true
      this.isEditWindow.isEditNum = obj.proNum
      this.isEditWindow.isEditId = obj.editId
      this.isEditWindow.data = this.reportState.form.filingGoodsInfos[obj.proNum - 1]
    },
    // 点击删除
    removeData (obj) {
      const index = this.reportState.form.filingGoodsInfos.indexOf(obj)
      if (index > -1) {
        this.reportState.form.filingGoodsInfos.splice(index, 1)
      }
    },

    downloadExcel () {
      window.location.href =
        'http://oss.tlwok.com/JDP%E6%8A%A5%E5%A4%87%E5%95%86%E5%93%81%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx'
    },

    uploadSuccess (res, file, fileList) {
      const keys = ['categoryName', 'brandName', 'goodsName', 'model', 'num', 'unit', 'weight', 'salesPrice', 'spec', 'packingList', 'packageSize', 'energySavingInfo', 'environmenttalInfo', 'place', 'manufacturer', 'refLink1', 'refLink2', 'refLink3', 'refImgs']
      if (res.success) {
        this.$message({
          type: 'success',
          message: res.desc,
        })
        res.result.forEach(item => {
          const data = {}
          keys.forEach(key => {
            data[key] = item[key]
          })
          this.reportState.form.filingGoodsInfos.push(data)
        })
      } else this.$message.error(res.desc)
    },
  },
}
</script>
<style lang='less' scoped>
.productBox {
  margin: 0 -20px;
  .topBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .leftBtn {
      display: flex;
      align-items: center;
    }
    .topBtn {
      display: flex;
      align-items: center;
      .filing-button {
        margin-right: 18px;
        height: 35px;
        padding: 0 20px;
        font-size: 14px;
      }
    }
    .clearTopBtn{
      margin-left: 42px;
    }
    .firstTop {
      margin-right: 60px;
    }
  }
  .marTop {
    margin-top: 40px;
  }
  .empty {
    margin-top: 50px;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #bbb;
    .emptyIcon {
      font-size: 64px;
      color: #bbb;
    }
    .txt {
      font-size: 14px;
      color: #bbb;
      margin-top: 30px;
    }
  }
}
.upload-box {
  display: inline-block;
}
</style>
